<template>
    <div>
        <div class="page-lazyload"><mt-swipe :auto="4000" :defaultIndex="1" class="mt-swiper">
      <mt-swipe-item class="slide1"><router-link to='./Mall' tag='a'><a href="">1</a> </router-link></mt-swipe-item>
      <mt-swipe-item class="slide2"><router-link to='./Mall' tag='a'><a href="">2</a> </router-link></mt-swipe-item>
      <mt-swipe-item class="slide3"><router-link to='./Mall' tag='a'><a href="">3</a> </router-link></mt-swipe-item>
      </mt-swipe>
      <ul class="page-lazyload-list">
      <li class="page-lazyload-listitem" v-for="item in list" :key="item.id">
         <router-link to='./Detail' tag='a' >
        <img v-lazy="item" class="page-lazyload-image">       
        <div class="info-deps">
       <a class="info-title-container" href="">
            <div class="info-title text-overflow">Vans x Independent 40周年联名再袭，铁十字硬核登场！</div>
        </a>
        <p class="info-text">连Supreme都要跟它搞事情，你确定这次不入手吗？！</p>
        <div class="time-view-like-share clearfix">
    <span>特别企划</span>&nbsp;&nbsp;|&nbsp;
    <span class="page-view">48920</span>人阅读
    <div class="like-share-container">         
    </div>
</div></div>
</router-link>
      </li>
    </ul>
  </div>
    </div>
</template>

<script>

export default {
name: 'Setting',
  data() {
    return {
      list: [
          '//img12.static.yhbimg.com/article/2018/11/20/11/0236af15e5482aa0a3ab6def301e844716.jpg?imageView2/2/w/640/h/640/q/60',
          '//img10.static.yhbimg.com/article/2018/11/23/11/01c11cec643922a0a6cfb905827a526f3f.jpg?imageView2/2/w/640/h/640/q/60',
          '//img11.static.yhbimg.com/article/2018/11/19/17/0174b99f94fc307e281cfe4ae46b62709c.jpg?imageView2/2/w/640/h/640/q/60',
          '//img11.static.yhbimg.com/article/2018/11/20/13/01f59b60c1d2eda8d0f3622b38b603714a.jpg?imageView2/2/w/640/h/640/q/60/format/webp',
          '//img10.static.yhbimg.com/article/2018/11/20/11/01aeaefde7121993553c3b48c367d77ea8.jpg?imageView2/2/w/640/h/640/q/60/format/webp',
          '//img10.static.yhbimg.com/article/2018/11/20/10/0107a5cd8eddfb6dacf44871b338f6f9cd.jpg?imageView2/2/w/640/h/640/q/60/format/webp',
        ]
      }
    }
}
</script>

<style lang='scss' scoped>
/* .router-link-active {
    color: #900;
  }
  .router-link-exact-active {
    color: #09f;
  } */
  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}



      .mt-swiper {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
         line-height: 200px;
      }
     
      .slide1 {
        background-color: #0089dc;
        color: #fff;
      }
      .slide2 {
        background-color: #ffd705;
        color: #000;
      }
      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
    .mint-swipe-indicator{
        margin: -87px 3px;
    }
@component-namespace page {
    @component lazyload {
      @descendent list {
        text-align: center;
      }
      @descendent listitem {
        width: 300px;
        margin: 0 auto;
        margin-bottom: 10px;
        background-color: #ddd;
      }
      @descendent image {
        display: block;
        width: 100%;
      }
      @descendent image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
      }
    }
  }
  img{
          height: 213px;
    width: 339px;
    margin: 0 auto;
    display: block;
  }
  .page-lazyload-listitem{
      margin-bottom: 15px;
      background: #ffffff;
  }
 
  .info-deps{
      padding: 0 23px 0 17px;
      font-size: 12px;
  
  }
  .info-title{
          color: #000;
    font-size: 20PX;
    font-weight: 700;
    line-height: 1.1rem;
    max-height: 1.1rem;
  }
  .text-overflow{
          overflow: hidden;
    text-overflow: ellipsis;
  }
  .info-text{
      -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: #444;
    display: -webkit-box;
    font-size: 14PX;
    line-height: 1.15rem;
    margin: .4rem 0 0;
    overflow: hidden;
  }
  .time-view-like-share{
          margin-top: .4rem;
              color: #b0b0b0;
    font-size: .5rem;
    height: .95rem;
    line-height: .95rem;
  }
</style>
